<template>
	<view class="box">
		<view class="left">
			<view :class="currentDict.id === item.id?'active':''" v-for="(item,index) of dictData"
				@click="dictSwitch(item)" :key="item.id">{{item.name}}</view>
		</view>
		<view class="right">
			<view class="search_box">
				<uni-search-bar @confirm="searchConfirm" v-model="searchValue" @cancel="clearSearch"
					@clear="clearSearch">
				</uni-search-bar>
			</view>
			<u-empty v-if="literatureData.length<=0" mode="list" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
			<LiteratureList :literatureData="literatureData"></LiteratureList>
			<u-loadmore :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText"
				:nomore-text="nomoreText" />
		</view>
	</view>
</template>

<script>
	import {
		dictLiterature,
		literatureList
	} from '../../api/api';
	import LiteratureList from "@/components/LiteratureList.vue";
	import {
		size
	} from "@/util/index.js"
	export default {
		components: {
			LiteratureList
		},
		data() {
			return {
				dictData: [],
				index: 0,
				currentDict: {},
				literatureData: [],
				meta: {
					page: 1,
					size
				},
				searchValue: null,
				status: 'nomore',
				loadingText: '努力加载中',
				loadmoreText: '轻轻上拉',
				nomoreText: '实在没有了'
			};
		},
		// 页面加载
		onShow() {
			this.meta = {
				...this.meta,
				page: 1
			}
			this.searchValue = null;
			//字典
			this.getDict()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.meta = {
				...this.meta,
				page: 1
			};
			this.literatureData = [];
			this.getLiterature('isPullLoading')
		},
		// 底部加载
		onReachBottom() {
			if (this.meta.page >= this.meta.lastPage) {
				this.status = "nomore";
			} else {
				this.status = "loading";
				this.meta.page++;
				this.getLiterature();
			}
		},
		watch: {
			currentDict() {
				this.meta = {
					page: 1,
					size
				};
				this.literatureData = [];
				this.getLiterature()
			}
		},

		methods: {
			// 搜索确定
			searchConfirm(v) {
				console.log(v);
				console.log(this.searchValue);
				this.literatureData = [];
				this.meta = {
					...this.meta,
					page: 1,
				}
				this.getLiterature()
			},
			// 清空搜索
			clearSearch() {
				this.meta = {
					...this.meta,
					page: 1
				}
				this.searchValue = null;
				this.getLiterature();
			},
			// 获取字典
			getDict(type = '') {
				dictLiterature().then(r => {
					this.dictData = r.data;
					this.currentDict = r.data[0];
				})
			},
			// 切换字典
			dictSwitch(item) {
				this.currentDict = item;
			},
			// 获取文献
			getLiterature(type = '') {
				uni.showLoading({
					mask: true,
					title: "加载中"
				});
				literatureList(this.meta.page, this.meta.size, this.currentDict.id, this.searchValue).then(r => {
					this.literatureData = [...this.literatureData, ...r.data ? r.data : []];
					this.meta = {
						size: r.meta.perSize,
						page: r.meta.currentPage,
						...r.meta
					};
					uni.hideLoading();
					this.status = "nomore";
					// 下拉刷新
					if (type === 'isPullLoading') {
						uni.stopPullDownRefresh();
						uni.showToast({
							title: "刷新成功",
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		padding-right: 10rpx;
		box-sizing: border-box;
		position: relative;

		.search_box {
			margin-top: 20rpx;

			/deep/ .uni-searchbar {
				padding: 0;

				.uni-searchbar__box {
					background-color: #fff !important;
				}
			}
		}


		.left {
			background: #fff;
			float: left;
			width: 130rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-right: 20rpx;
			position: fixed;
			left: 0;
			top: 0;
			min-height: 100vh;

			>view {
				width: 100%;
				text-align: center;
				padding: 20rpx 0;
				font-size: 26rpx;
				color: #111;
			}

			>.active {
				background-color: #eee;
			}
		}

		.right {
			padding-left: 150rpx;
			width: calc(100% - 150rpx);
			float: left;
		}
	}
</style>
